<script setup>
const navData = [
  
  {
    id: 3,
    text: 'CSS字体生成器',
    link: 'https://typescale.com/?size=',
    desc: '手动生成需要的CSS字体代码',
  },
  {
    id: 4,
    text: 'CSS布局生成器',
    link: 'https://layout.bradwoods.io/',
    desc: '从几个布置好的Grid与flex中挑选想要的页面布局，生成代码',
  },
  {
    id: 5,
    text: '开箱即用CSS样式大全',
    link: 'https://uiverse.io/',
    desc: '开箱即用的按钮、复选框、开关、卡片、加载、输入框和表单CSS代码',
  },
  {
    id: 6,
    text: '全局阴影效果',
    link: 'https://www.joshwcomeau.com/css/designing-shadows/#layering',
    desc: '深入探讨CSS全局阴影效果的文章',
  },
  {
    id: 6,
    text: 'CSS布局样式',
    link: 'https://csslayout.io/',
    desc: 'tree/table/Tooltip/...',
  },
  {
    id: 6,
    text: 'CSS3 Patterns Gallery',
    link: 'https://projects.verou.me/css3patterns/#',
    desc: '背景渐变网站1',
  },
  {
    id: 6,
    text: 'standardista',
    link: 'http://www.standardista.com/CSS3gradients/flags.html',
    desc: '使用 纯CSS 的方式画出多国国旗。',
  },
  {
    id: 6,
    text: 'bennettfeely',
    link: 'https://bennettfeely.com/gradients/',
    desc: '背景渐变网站3',
  },
  {
    id: 6,
    text: 'Flags with CSS3 Gradients',
    link: 'http://www.standardista.com/cssgradients/',
    desc: '背景渐变网站4',
  },
  {
    id: 6,
    text: 'Hero Patterns',
    link: 'https://heropatterns.com/',
    desc: '官方提供了几十款纹理，你可以根据自己的需求设置两种对比色和不透明度。 完成后会返回一段CSS代码给你，不过和前面几个网站有点不同的是，Hero Patterns 的背景图使用了 base64 的方式去实现的，而不是 CSS 背景渐变 的方式。',
  },
  {
    id: 6,
    text: 'HUE.CSS',
    link: 'http://www.standardista.com/cssgradients/',
    desc: '背景渐变网站4',
  },
  {
    id: 6,
    text: 'Flags with CSS3 Gradients',
    link: 'http://evankarageorgos.github.io/hue/grid.html',
    desc: '使用 CSS 背景渐变 的方式做出的数十款高端大气的背景，网站上的所有案例都提供了代码。',
  },
  {
    id: 6,
    text: 'Pure CSS Stripes Generator',
    link: 'https://stripesgenerator.com/',
    desc: '帮你生成 条纹背景 的代码。 你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。 最后会返回一段 css 代码给你。',
  },
  {
    id: 6,
    text: 'Glass Morphism',
    link: 'https://glassgenerator.netlify.app/',
    desc:'设置 毛玻璃背景 样式，你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。 最后会返回 html 和 css 代码给你。'
  }, {
    id: 6,
    text: 'uiGradients',
    link: 'https://uigradients.com/',
    desc: '提供了不同色系搭配的渐变代码。'
  }, {
    id: 6,
    text: 'Gradient Colors Collection Palette',
    link: 'https://webkul.github.io/coolhue/',
    desc: '色卡，可以一键复制 css 代码'
  }, {
    id: 6,
    text: 'Fresh Background Gradients',
    link: 'https://webgradients.com/',
    desc: '提供了即使个配色方案，有双色的，也有多色的。同样提供一键复制 css 代码。'
  }, {
    id: 6,
    text: 'Cool Backgrounds',
    link: 'https://coolbackgrounds.io/',
    desc: '可以生成 5种类型 的背景图片，并且提供多套成熟的配色方案供你选择。 但该网站生成的是背景图片，不是代码。'
  }, {
    id: 6,
    text: 'Svg Wave',
    link: 'https://svgwave.in/',
    desc: '生成波浪背景图，可以自定义波浪的幅度、颜色等属性。 支持 SVG 和 PNG 下载。'
  }, {
    id: 6,
    text: 'Subtle Patterns',
    link: 'https://www.toptal.com/designers/subtlepatterns/',
    desc: '提供了几十种纹理图。'
  }, {
    id: 6,
    text: 'Stripe Generator',
    link: 'http://www.stripegenerator.com/',
    desc: '可配置的条纹背景图片。'
  }, {
    id: 6,
    text: 'ZenBG',
    link: 'https://galactic.ink/bg/',
    desc: '在线设置纹理背景和渐变颜色，最后融合在一起生成一张好看的图片。 同时还提供 css 代码给你参考，告诉你如何更好的使用这张图片。'
  }, {
    id: 6,
    text: 'Patterninja',
    link: 'https://patterninja.com/',
    desc: '帮你生成可平铺的背景图。'
  }, {
    id: 6,
    text: 'The Pattern Library',
    link: 'http://thepatternlibrary.com/',
    desc: '提供几十款可平铺的好看背景。 注意：下载按钮在网页的左上角。'
  },
]
</script>

<template>
  <div class="grid auto-rows-auto grid-cols-2 gap-[12px]">
    <section v-for="navItem of navData" :key="navItem.id">
      <a :href="navItem.link" rel="noreferrer" target="_blank" class="group">
        <section
          class="flex h-full flex-col border-1  border-solid border-[var(--vp-c-border)]/[.55] rounded-[8px] leading-[24px] px-[24px] py-[12px] group-hover:shadow">
          <span class="text-gray-600 group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100">
            {{ navItem.text }}
          </span>
          <span
            class="mb-auto text-sm text-gray-700 opacity-50 dark:text-gray-300 dark:group-hover:text-gray-50 min-h-[20px]">
            {{ navItem.desc ?? navItem.text }}
          </span>
        </section>
      </a>
    </section>
  </div>
</template>

<style scoped></style>